{% extends 'generic/object_retrieve.html' %}
{% load helpers %}

{% block title %}{{ object }} - Status{% endblock %}

{% block content %}
    {% include 'inc/ajax_loader.html' %}
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header"><strong>Device Facts</strong></div>
                <table class="table card-body">
                    <tr>
                        <th>Hostname</th>
                        <td id="hostname"></td>
                    </tr>
                    <tr>
                        <th>FQDN</th>
                        <td id="fqdn"></td>
                    </tr>
                    <tr>
                        <th>Vendor</th>
                        <td id="vendor"></td>
                    </tr>
                    <tr>
                        <th>Model</th>
                        <td id="model"></td>
                    </tr>
                    <tr>
                        <th>Serial Number</th>
                        <td id="serial_number"></td>
                    </tr>
                    <tr>
                        <th>OS Version</th>
                        <td id="os_version"></td>
                    </tr>
                    <tr>
                        <th>Uptime</th>
                        <td id="uptime"></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header"><strong>Environment</strong></div>
                <table class="table card-body">
                    <tr id="cpu">
                        <th colspan="2"><span class="mdi mdi-gauge"></span> CPU</th>
                    </tr>
                    <tr id="memory">
                        <th colspan="2"><span class="mdi mdi-chip"></span> Memory</th>
                    </tr>
                    <tr id="temperature">
                        <th colspan="2"><span class="mdi mdi-thermometer"></span> Temperature</th>
                    </tr>
                    <tr id="fans">
                        <th colspan="2"><span class="mdi mdi-fan"></span> Fans</th>
                    </tr>
                    <tr id="power">
                        <th colspan="2"><span class="mdi mdi-power"></span> Power</th>
                    </tr>
                </table>
            </div>
        </div>
    </div>
{% endblock content %}

{% block javascript %}
    {{ block.super }}
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                url: "{% url 'dcim-api:device-napalm' pk=object.pk %}?method=get_facts&method=get_environment",
                dataType: 'json',
                success: function(json) {
                    if (!json['get_facts']['error']) {
                        $('#hostname').html(json['get_facts']['hostname']);
                        $('#fqdn').html(json['get_facts']['fqdn']);
                        $('#vendor').html(json['get_facts']['vendor']);
                        $('#model').html(json['get_facts']['model']);
                        $('#serial_number').html(json['get_facts']['serial_number']);
                        $('#os_version').html(json['get_facts']['os_version']);
                // Calculate uptime
                        var uptime = json['get_facts']['uptime'];
                        console.log(uptime);
                        var uptime_days = Math.floor(uptime / 86400);
                        var uptime_hours = Math.floor(uptime % 86400 / 3600);
                        var uptime_minutes = Math.floor(uptime % 3600 / 60);
                        $('#uptime').html(uptime_days + "d " + uptime_hours + "h " + uptime_minutes + "m");
                    }

                    if (!json['get_environment']['error']) {
                        $.each(json['get_environment']['cpu'], function(name, obj) {
                            var row="<tr><td>" + name + "</td><td>" + obj['%usage'] + "%</td></tr>";
                            $("#cpu").after(row)
                        });
                        if (json['get_environment']['memory']) {
                            var memory = $('#memory');
                            memory.after("<tr><td>Used</td><td>" + json['get_environment']['memory']['used_ram'] + "</td></tr>");
                            memory.after("<tr><td>Available</td><td>" + json['get_environment']['memory']['available_ram'] + "</td></tr>");
                        }
                        $.each(json['get_environment']['temperature'], function(name, obj) {
                            var style = "table-success";
                            if (obj['is_alert']) {
                                style = "table-warning";
                            } else if (obj['is_critical']) {
                                style = "table-danger";
                            }
                            var row="<tr class=\"" + style +"\"><td>" + name + "</td><td>" + obj['temperature'] + "°C</td></tr>";
                            $("#temperature").after(row)
                        });
                        $.each(json['get_environment']['fans'], function(name, obj) {
                            var row;
                            if (obj['status']) {
                                row = `<tr class="table-success"><td>${name}</td><td>{{ True | render_boolean }}</td></tr>`;
                            } else {
                                row = `<tr class="table-danger"><td>${name}</td><td>{{ False | render_boolean }}</td></tr>`;
                            }
                            $("#fans").after(row)
                        });
                        $.each(json['get_environment']['power'], function(name, obj) {
                            var row;
                            if (obj['status']) {
                                row = `<tr class="table-success"><td>${name}</td><td>{{ True | render_boolean }}</td></tr>`;
                            } else {
                                row = `<tr class="table-danger"><td>${name}</td><td>{{ False | render_boolean }}</td></tr>`;
                            }
                            $("#power").after(row)
                        });
                    }
                },
                error: function(xhr) {
                    alert(xhr.responseText);
                }
            });
        });
    </script>
{% endblock javascript %}
